var treePanel = Ext.extend(Ext.tree.TreePanel, {
	id        : 'companyTreePanel',
	title     : 'Structure',
	region    :'west',
	split     : true,
	height    : 300,
	width     : 400,
	minSize   : 150,
	autoScroll: true,
	animate   : true,
    
	// tree-specific configs:
    rootVisible : true,
    lines       : false,
    singleExpand: false,
    useArrows   : true,    
 
    loader: new Ext.tree.TreeLoader({
    	dataUrl: 'distributor/getlist'
	}),
    
    root       : {
        nodeType : 'async',
        text     : 'Company',
        iconCls  : 'folder',
        id       : 'CompanyTreeRoot',
        expanded : true
    },

    listeners:{
    	render: function() {
    		// After the component has been rendered, disable the default browser context menu
    		Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
    	},
    	contextmenu: onCtxMenu,
    	click: function(node, eventObj){
    		showInfoPanelContent(node);
	   	},
	   	load: function(node, eventObj){
	   		var rootNode = Ext.getCmp('companyTreePanel').getRootNode();
	   		if (node == rootNode)
	   			showInfoPanelContent(rootNode);
	   	}
    },
    initComponent: function(){				
    	treePanel.superclass.initComponent.call(this);
    }    
});